<template name="ad_my_list">
  <view class="pc-container">
    <!-- 简洁顶部栏 -->
    <view class="compact-header">
      <view class="header-info">
        <text class="page-title">发布的内容</text>
        <view class="header-actions">
          <view class="refresh-page-btn" @click="onloads()" title="刷新页面">
            <text class="refresh-icon">🔄</text>
            <text>刷新</text>
          </view>
          <view class="mini-stats">
            <view class="mini-stat">
              <text class="mini-number">{{total.totalCount}}</text>
              <text class="mini-label">发布</text>
            </view>
            <view class="mini-stat">
              <text class="mini-number">{{total.auditedCount}}</text>
              <text class="mini-label">审核</text>
            </view>
            <view class="mini-stat">
              <text class="mini-number">{{total.stickyCount}}</text>
              <text class="mini-label">置顶</text>
            </view>
            <view class="mini-stat">
              <text class="mini-number">{{total.viewCount}}</text>
              <text class="mini-label">浏览</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 三列网格内容 -->
    <view class="grid-container" v-if="posts.list.length > 0">
      <view 
        v-for="(post, index) in posts.list" 
        :key="post.id || index" 
        class="content-card"
        :class="{'sticky-highlight': post.is_top==1, 'pending-card': post.status==0}"
      >
        <!-- 紧凑头部 -->
        <view class="card-header-compact">
          <view class="time-status">
            <text class="create-time justify">{{$common.formatWechatTime(post.create_time)}}</text>
            <view class="status-tags">
              <text class="status-tag audit justify" v-if="post.status==0">审核中</text>
              <text class="status-tag audit justify" v-if="post.status==2">审核被拒绝</text>
              <text class="status-tag sticky justify" v-if="post.is_top==1 && post.status==1">置顶</text>
            </view>
          </view>
          <view class="action-buttons">
            <!-- 审核操作按钮 -->
            <view 
              class="action-icon-btn approve" 
              @tap="showApproveConfirm(index)" 
              v-if="post.status==0"
              title="审核通过"
            >
              <text class="action-symbol">✓</text>
            </view>
            <view 
              class="action-icon-btn reject" 
              @tap="showRejectConfirm(index)" 
              v-if="post.status==0"
              title="审核拒绝"
            >
              <text class="action-symbol">✗</text>
            </view>
            <!-- 刷新按钮 -->
            <view 
              class="action-icon-btn refresh" 
              @tap="ad_update(index)" 
              v-if="post.status==1" 
              :class="{disabled: post.update==false}"
              title="刷新内容"
            >
              <text class="action-symbol">↻</text>
            </view>
            <!-- 删除按钮 -->
            <view class="action-icon-btn delete" @tap="showDeleteConfirm(index)" title="删除">
              <text class="action-symbol">×</text>
            </view>
          </view>
        </view>

        <!-- 内容区域 -->
        <view class="content-body">
          <text class="post-content-text" :class="{expanded: !post.collapsed}">
            {{post.content}}
          </text>
          <text 
            class="toggle-expand" 
            @tap="toggleText(index)"
            v-if="post.content && post.content.length > 150"
          >
            {{post.collapsed ? '...更多' : '收起'}}
          </text>
        </view>

        <!-- 图片区域 -->
        <view class="image-section" v-if="post.images && post.images.length">
          <view class="image-grid-compact">
            <view 
              v-for="(img, imgIndex) in post.images.slice(0, 2)" 
              :key="imgIndex" 
              class="image-thumb"
              @tap="previewImage(post.images, imgIndex)"
            >
              <image 
                class="thumb-image" 
                :src="img.reduce || img.source" 
                mode="aspectFill"
              />
              <view class="image-badge" v-if="imgIndex === 1 && post.images.length > 2">
                <text class="badge-text">+{{post.images.length - 2}}</text>
              </view>
            </view>
          </view>
        </view>

        <!-- 底部信息 -->
        <view class="card-footer-compact">
          <view class="footer-info">
            <text class="view-count">👁 {{post.view_count}}</text>
            <view class="refresh-indicator" v-if="post.status==1 && post.update==true">
              <text class="indicator-dot"></text>
              <text class="indicator-text">可刷新</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 简洁空状态 -->
    <view class="minimal-empty" v-if="posts.list.length === 0">
      <text class="empty-symbol">📭</text>
      <text class="empty-message">暂无发布内容</text>
    </view>

    <!-- 加载指示器 -->
    <view class="load-indicator" v-if="posts.more && posts.list.length > 0">
      <text class="loading-text">加载中...</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      posts: {
        list: [],
        more: false,
        nowPage: 0,
      },
      total: {
        totalCount: 0,
        viewCount: 0,
        stickyCount: 0,
        auditedCount:0
      }
    }
  },
  created(){
    var that = this
    this.onloads();

  },


  onPullDownRefresh() {
    this.onloads();
  },
  onReachBottom() {
    this.ad_Getlist(false);
  },
  methods: {
    onloads(){
      this.ad_GetlistTotal();
      this.ad_Getlist(true);
    },
    ad_GetlistTotal(index) {
      var that = this
      that.$common.get_request(
        {
          type: 'ad_GetlistTotal',
          admin:1
        },
        (res) => {
          that.total = res
        },
        () => {},
        true
      );
    },
    
    add_send() {
      this.$login.checkLogin(true)
      this.$common.goto("/pages/ad/upload/index")  
    },
    
    ad_Getlist(IsUpdate) {
      var that = this
      if (IsUpdate != true && this.posts.more == false) {
        return;
      }
      if (IsUpdate == true) {
        that.posts.list = []
        that.posts.nowPage = 1;
      } else {
        that.posts.nowPage++;
      }

      that.$common.get_request(
        {
          type: 'ad_Getlist',
          pages: that.posts.nowPage,
          admin:1
        },
        (res) => {
          res.list.forEach((item, index) => {
            item.collapsed = true
            that.posts.list.push(item)
          });
          that.posts.more = res.more;
          uni.stopPullDownRefresh();
        },
        () => {
          uni.stopPullDownRefresh();
        },
        true
      );
    },

    toggleText(index) {
      this.posts.list[index].collapsed = !this.posts.list[index].collapsed;
      this.$set(this.posts.list, index, this.posts.list[index]);
    },
    
    previewImage(images, currentIndex) {
      const urls = images.map(img => img.source || img.reduce);
      uni.previewImage({
        urls: urls,
        current: urls[currentIndex]
      });
    },
    
    showDeleteConfirm(index) {
      const post = this.posts.list[index];
      uni.showModal({
        title: '删除确认',
        content: '确定要删除这条内容吗？',
        confirmColor: '#ff4444',
        success: (res) => {
          if (res.confirm) {
            this.ad_delete(index);
          }
        }
      });
    },
    
    ad_delete(index) {
      var that = this
      var ad_id = that.posts.list[index].id
      that.$common.get_request(
        {
          type: 'ad_delete',
          ad_id: ad_id,
          admin:1
        },
        (res) => {
          that.posts.list.splice(index,1)
          that.ad_GetlistTotal();
        },
        () => {},
        true
      );
    },
    
    ad_update(index) {
      if (this.posts.list[index].update == false) {
        this.$common.showModal('提示', '今日已刷新')
        return;
      }

      var that = this
      var ad_id = that.posts.list[index].id
      that.$common.get_request(
        {
          type: 'ad_update',
          ad_id: ad_id,
          admin:1
        },
        (res) => {
          that.posts.list[index].create_time = res.create_time
          that.posts.list[index].update = false
          setTimeout(() => {
            that.$common.showModal('刷新成功', '内容已刷新')
          }, 500)
        },
        () => {},
        true
      );
    },
    
    showApproveConfirm(index) {
      uni.showModal({
        title: '审核确认',
        content: '确定要通过这条内容的审核吗？',
        confirmColor: '#07c160',
        success: (res) => {
          if (res.confirm) {
            this.ad_status(index, 1);
          }
        }
      });
    },
    
    showRejectConfirm(index) {
      uni.showModal({
        title: '审核确认',
        content: '确定要拒绝这条内容的审核吗？',
        confirmColor: '#ff4444',
        success: (res) => {
          if (res.confirm) {
            this.ad_status(index, 2);
          }
        }
      });
    },
    
    ad_status(index, status) {
      var that = this
      var ad_id = that.posts.list[index].id
      that.$common.get_request(
        {
          type: 'ad_status',
          ad_id: ad_id,
          status: status,
          admin:1
        },
        (res) => {
          that.posts.list[index].status = status
          that.ad_GetlistTotal();
          that.$set(that.posts.list, index, that.posts.list[index]);
        },
        () => {},
        true
      );
    }
  }
}
</script>

<style scoped>
.pc-container {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 24px;
  margin: 0 auto;
  width: calc(100% - 48px);
  max-width: 1400px;
  overflow: auto;
  height: 100%;
}

/* 简洁顶部 */
.compact-header {
  margin-bottom: 24px;
  padding: 16px 0;
  border-bottom: 1px solid #eaecef;
}

.header-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: #24292e;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 24px;
}

.refresh-page-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: #f6f8fa;
  border-radius: 6px;
  font-size: 14px;
  color: #24292e;
  cursor: pointer;
  transition: all 0.2s;
}

.refresh-page-btn:hover {
  background: #e1e4e8;
}

.refresh-icon {
  font-size: 14px;
}

.mini-stats {
  display: flex;
  gap: 24px;
}

.mini-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.mini-number {
  font-size: 16px;
  font-weight: 600;
  color: #24292e;
}

.mini-label {
  font-size: 12px;
  color: #6a737d;
}

/* 三列网格布局 */
.grid-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
}

.grid-container .content-card {
  width: calc(33.333% - 11px); /* 3列，考虑gap */
  box-sizing: border-box;
}

/* 内容卡片 */
.content-card {
  background: white;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #e1e4e8;
  transition: all 0.2s ease;
  cursor: pointer;
}

.content-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.content-card.sticky-highlight {
  border-left: 3px solid #f9826c;
}

.content-card.pending-card {
  border-left: 3px solid #ffab00;
}

/* 紧凑头部 */
.card-header-compact {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
}

.time-status {
  display: flex;
  gap: 6px;
  margin: auto 0px;
}

.create-time {
  font-size: 12px;
  color: #6a737d;
}

.status-tags {
  display: flex;
  gap: 4px;
}

.status-tag {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.status-tag.audit {
  background: #fff5b1;
  color: #b08800;
}

.status-tag.sticky {
  background: #ffdce0;
  color: #cf222e;
}

.action-buttons {
  display: flex;
  gap: 4px;
}

.action-icon-btn {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 12px;
  font-weight: 600;
}

.action-icon-btn.approve {
  background: #f6f8fa;
  color: #28a745;
}

.action-icon-btn.approve:hover {
  background: #dcffe4;
}

.action-icon-btn.reject {
  background: #f6f8fa;
  color: #cb2431;
}

.action-icon-btn.reject:hover {
  background: #ffd7d5;
}

.action-icon-btn.refresh {
  background: #f6f8fa;
  color: #24292e;
}

.action-icon-btn.refresh:hover:not(.disabled) {
  background: #e1e4e8;
}

.action-icon-btn.refresh.disabled {
  background: #f6f8fa;
  color: #6a737d;
  cursor: not-allowed;
}

.action-icon-btn.delete {
  background: #f6f8fa;
  color: #cf222e;
}

.action-icon-btn.delete:hover {
  background: #ffdce0;
}

/* 内容主体 */
.content-body {
  margin-bottom: 12px;
}

.post-content-text {
  font-size: 14px;
  line-height: 1.5;
  color: #24292e;
  display: block;
}

.post-content-text:not(.expanded) {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}

.toggle-expand {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: #0366d6;
  cursor: pointer;
  font-weight: 500;
}

.toggle-expand:hover {
  text-decoration: underline;
}

/* 图片区域 */
.image-section {
  margin-bottom: 12px;
}

.image-grid-compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.image-thumb {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 6px;
  overflow: hidden;
  background: #f6f8fa;
}

.thumb-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.image-thumb:hover .thumb-image {
  transform: scale(1.05);
}

.image-badge {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-text {
  color: white;
  font-size: 12px;
  font-weight: 600;
}

/* 紧凑底部 */
.card-footer-compact {
  border-top: 1px solid #eaecef;
  padding-top: 8px;
}

.footer-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.view-count {
  font-size: 12px;
  color: #6a737d;
}

.refresh-indicator {
  display: flex;
  align-items: center;
  gap: 4px;
}

.indicator-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #28a745;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.5; }
  100% { opacity: 1; }
}

.indicator-text {
  font-size: 11px;
  color: #28a745;
  font-weight: 500;
}

/* 简洁空状态 */
.minimal-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 20px;
  background: white;
  border-radius: 8px;
  border: 1px dashed #e1e4e8;
  gap: 16px;
}

.empty-symbol {
  font-size: 48px;
  opacity: 0.5;
}

.empty-message {
  font-size: 14px;
  color: #6a737d;
}

/* 加载指示器 */
.load-indicator {
  display: flex;
  justify-content: center;
  padding: 20px;
}

.loading-text {
  font-size: 14px;
  color: #6a737d;
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .grid-container .content-card {
    width: calc(50% - 8px); /* 2列 */
  }
}

@media (max-width: 768px) {
  .grid-container .content-card {
    width: 100%; /* 1列 */
  }
  
  .header-actions {
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
  }
  
  .mini-stats {
    gap: 16px;
  }
}
</style>